<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>$resource</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap3/css/dashboard.css">
    <script src="../lib/angularjs/angular.min.js"></script>
    <script src="../lib/angularjs/angular-resource.js"></script>
    <style>body{margin:10px 80px;}</style>
</head>
<body ng-app="app01">
<div class="panel panel-primary">
    <div class="panel-heading"><b>$resource</b></div>
    <div class="panel-body">
        这个服务可以创建一个资源对象，我们可以用它非常方便地同支持RESTful的服务端数据源进行交互，当同支持RESTful的数据模型一起工作时，它就派上用场了。
        <div class="well">
            var User = $resource('/api/users/:userId', {userId:'@id'});
        </div>
        <div class="well">
            <div class="text-danger">User.get({id:'123'}, successFn, errorFn);</div>
            该方法向url发送一个get请求，并期望一个json类型的响应。这里会向/api/users/123发送一个请求，successFn处理请求成功响应，errorFn处理错误。
        </div>
        <div class="well">
            <div class="text-danger">User.query(params, successFn, errorFn)</div>
            同get()方法使用类似，一般用来请求多条数据。
        </div>
        <div class="well">
            <div class="text-danger">User.save(params, payload, successFn, errorFn);</div>
            save方法会发起一个post请求，params参数用来填充url中变量，对象payload会作为请求体进行发送
        </div>
        <div class="well">
            <div class="text-danger">User.delete(params, payload, successFn,errorFn)</div>
            delete方法一个DELETE请求，payload作为消息体进行发送
        </div>
        <div class="well">
            <div class="text-danger">User.remove(params, payload, successFn, errorFn)</div>
            同delete类似，不同的是remove用来移除多条数据
        </div>
    </div>
    <div class="panel-footer">
        <div class="well">
            $resource服务可以将$http请求转换成save和update等简单形式。我们可以通过$resource服务来处理复杂的细节，而无需自己编写重复和繁琐的业务代码。
        </div>
        <fieldset>
            <legend>对于非get请求</legend>
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="text-danger badge text-danger">  params（对象）</span>
                    随请求一起发送的参数。它们可以是URL中的具名参数，也可以是查询参数。
                </li>
                <li class="list-group-item">
                    <span class="badge bg-danger"> postData（对象）</span>
                    这个对象是随请求发送的数据体。
                </li>
                <li class="list-group-item">
                    <span class="badge bg-danger"> successFn（函数）</span>
                    当HTTP响应成功时的回调函数。
                </li>
                <li class="list-group-item">
                    <span class="badge bg-danger">  errorFn（函数）</span>
                    当HTTP响应非成功时的回调函数。
                </li>
            </ul>
        </fieldset>
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading"><b>扩展$resource</b></div>
    <div class="panel-body">
        $resource对常见的五种请求进行封装，我们还可以对$resource进行扩展。这里要扩展$resource我们需要传入第三个参数，该参数是一个对象。
        <div class="well text-danger">
            <xmp>
$resource('/api/users',{},{
    sendEmail:{
        method:'',
        url:'',
        params:{},
        isArray:boolean,
        transformRequest:函数或者函数数组
        transformResponse:函数或者函数数组
        cache:布尔型或缓存对象
        timeout:数值或promise对象
        withCredentials:布尔类型
        responseType:字符串，用来设置XMLHttpRequestResponseType属性
    }
})
            </xmp>
        </div>
        我们也可以将$resource服务当做自定义服务的基础。
        <div class="well text-danger">
            <xmp>
angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){
    return $resource(url,{},{});
}]);
            </xmp>
        </div>
    </div>
    <div class="panel-footer">
    </div>
</div>
<div class="panel panel-primary" ng-controller="ctrl01">
    <div class="panel-heading">get</div>
    <div class="panel-body">
        <button class="btn btn-danger" ng-click="loadingGet()">get</button>
        <button class="btn btn-danger" ng-click="loadingGet2()">get方式二</button>
        <button class="btn btn-danger" ng-click="loadingQuery()">query</button>
        <button class="btn btn-danger" ng-click="loadingSave()">save</button>
        <button class="btn btn-danger" ng-click="loadingDelete()">delete</button>
        <button class="btn btn-danger" ng-click="loadingRemove()">remove</button>
        <button class="btn btn-primary" ng-click="loadingGetAndSave()">getAndSave</button>
        <p>{{message}}</p>
    </div>
</div>
<div class="panel panel-primary" ng-controller="ctrl02">
    <div class="panel-heading">$promise、$resolved</div>
    <div class="panel-body">
        <p class="well">
            $promise:{{message}}
        </p>
        <p class="well">
            $resolved:{{resolved}}
        </p>
    </div>
    <div class="panel-footer">
        $resource集合和实例有两个特殊的属性用来同底层的数据定义进行交互。
        <p class="alert-danger alert">
            <b>$primise：</b>属性是为$resource生成的原始promise对象。这个属性是特别用来同$routeProvider.when()在resolve时进行连接的。如果请求成功了，资源实例或集合对象会随promise的resolve一起返回。如果请求失败了，promise被resolve时会返回HTTP响应对象，其中没有resource属性。
        </p>
        <p class="alert-danger alert">
            <b>$resolved(布尔型)：</b>$resolved属性在服务器首次响应时会被设置为true（无论请求是否成功）。
        </p>
    </div>
</div>
</body>
<script>
    var app=angular.module('app01',["ngResource"]);
</script>
<script>
    app.controller('ctrl01',function ($scope,$resource) {
        var User = $resource('templeage-other.html:userId', {userId:'@id'});
        var Org = $resource('7.3.json:orgId', {orgId:'@id'});
        $scope.message="未加载……";
        $scope.loadingGet=function () {
            User.get({id:'123'}, successFn, errorFn);
        }
        $scope.loadingGet2=function () {
            $scope.message=User.get({id:'123'});
        }
        $scope.loadingQuery=function () {
            Org.query({id:'123'}, successFn, errorFn);
        }
        $scope.loadingSave=function () {
            User.save({id:'123'},{name:'changeAnotherName'}, successFn, errorFn);
        }
        $scope.loadingGetAndSave=function () {
            User.get({id:'123'},{name:'changeAnotherName'}, function (user) {
                $scope.message=user;
                /** 在这里可以修改user，然后通过下面一行保存。 **/
                user.$save(); // Save the user====》这个等同于：User.save({id: '123'}, {name: 'Ari'});
            });
        }
        $scope.loadingDelete=function () {
            Org.delete({id:'123'},{name:'changeAnotherName'}, successFn, errorFn);
        }
        $scope.loadingRemove=function () {
            Org.remove({id:'123'},{name:'changeAnotherName'}, successFn, errorFn);
        }
        function successFn(data) {
            $scope.message=data;
        }
        function errorFn(data) {
            $scope.message=data.toString();
        }
    });
</script>
<script>
    app.controller('ctrl02',function ($scope,$resource) {
        var User = $resource('templeage-other.html:userId', {userId:'@id'});
        $scope.user = User.get( {username: 'bob'}  );    // GET
        $scope.user.$promise.then(function(data) {
            $scope.message=data;
        });
        $scope.resolved=$scope.user.$resolved;
    });
</script>
</html>